
<template>
  <div class="container">
    <div class="header">
      <div class="button" :class="{opt: optValue === 'localVideo'}" @click="clickNav('localVideo')">我的视频</div>
      <div class="button" :class="{opt: optValue === 'localShare'}" @click="clickNav('localShare')">我的桌面</div>
      <div class="button" :class="{opt: optValue === 'remoteVideo'}" @click="clickNav('remoteVideo')">远程视频</div>
      <div class="button" :class="{opt: optValue === 'remoteShare'}" @click="clickNav('remoteShare')">远程桌面</div>
    </div>
    
    <div class="container-video">
      <video class="video" v-show="optValue === 'localVideo'" autoplay playsinline controls ref="localVideoDom"></video>
      <video class="video" v-show="optValue === 'localShare'" autoplay playsinline controls ref="localShareDom"></video>
      <video class="video" v-show="optValue === 'remoteVideo'" autoplay playsinline ref="remoteVideoDom"></video>
      <video class="video" v-show="optValue === 'remoteShare'" autoplay playsinline ref="remoteShareDom"></video>
    </div>
    <div class="footer">
      <div class="button" @click="open" v-show="optValue === 'localVideo' || optValue === 'localShare'">开启共享</div>
      <div class="button" @click="close" v-show="optValue === 'localVideo' || optValue === 'localShare'">关闭共享</div>
      <div class="button" @click="changeRemoteVideo" v-show="optValue === 'remoteVideo'">切换远程视频</div>
      <div class="button" @click="changeRemoteShare" v-show="optValue === 'remoteShare'">切换远程桌面</div>
      <div class="button" @click="clickAudio" v-show="optValue === 'localVideo' || optValue === 'remoteVideo'">
        {{ audio ? '关闭声音' : '开启声音'  }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const optValue = ref('localVideo');
const audio = ref(false);
const localVideoDom = ref(null), localShareDom = ref(null), remoteVideoDom = ref(null), remoteShareDom = ref(null);

function clickNav(value) {
  optValue.value = value;
}

function clickAudio() {
  const dom = getCurrDom();
  if (dom == null || dom.srcObject == null) {
    alert('请先开启共享！')
    return;
  }
  const tracks = dom.srcObject.getAudioTracks()
  if (tracks == null || tracks.length === 0) {
    alert('当前没有音频轨道！')
    return;
  }
  tracks[0].enabled = !audio.value;
  audio.value = !audio.value;
}

function open() {
  if (optValue.value === 'localVideo') {
    openVideo()
  } else {
    openShare()
  }
}

function openVideo() {
  if (localVideoDom.value == null || localVideoDom.value.srcObject == null) {
    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    }).then(strem => {
      localVideoDom.value.srcObject = strem
      localVideoDom.value.onloadedmetadata = (e) => {
        localVideoDom.value.play()
      }
      audio.value = true;
    }).catch(err => {
      alert(err.name + ":" + err.message)
    })
  }
}

function openShare() {
  if (localVideoDom.value == null || localShareDom.value.srcObject == null) {
    navigator.mediaDevices.getDisplayMedia({}).then(stream => {
      localShareDom.value.srcObject = stream
      localShareDom.value.play()
    }).catch(err => {
      alert(err)
    })
  }
}

function close() {
  const dom = getCurrDom();
  if (dom.srcObject != null) {
    dom.srcObject.getTracks().forEach(track => track.stop());
    dom.srcObject = null;
  }
}

function getCurrDom() {
  if (optValue.value === 'localVideo') {
    return localVideoDom.value
  } else {
    return localShareDom.value
  }
}

function changeRemoteVideo() {}
function changeRemoteShare() {}
</script>
<style scoped>
.container {
  height: 100%;
  .header {
    height: 40px;
    border-bottom: 1px solid #cdcdcd;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .container-video {
    height: calc(100% - 41px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .video{
      max-width: 100%;
      max-height: calc(100% - 10px);
    }
  }

  .footer {
    position: fixed;
    z-index: 100;
    overflow: hidden;
    bottom: 10px;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .button {
    cursor: pointer;
    background-color: #fff;
    border-radius: 5px;
    height: 30px;
    padding: 0 8px;
    margin: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .opt{
    background-color: #d00058;
    color: #fff;
  }
}
</style>